/* eslint react/no-string-refs:0 */
import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Input, Grid, Button, Select, NumberPicker, Radio, Message } from '@alifd/next';
import {
    FormBinderWrapper as IceFormBinderWrapper,
    FormBinder as IceFormBinder,
} from '@icedesign/form-binder';
import classnames from 'classnames';
import styles from './index.module.scss';
import request from '../../../../utils/request';
import { host, stringCheck } from '../../../../const';

const RadioGroup = Radio.Group;
const { Row, Col } = Grid;
export default class BattleForm extends Component {
  static displayName = 'BattleForm';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
      super(props);
      this.state = {
          value: {
              name: '',
              redVestNumStr: [{}],
              blueVestNumStr: [{}],
              orangeVestNumStr: [{}],
              yellowVestNumStr: [{}],
              vestMode: 1,
              mapEntity: null,
              remark: '',
          },
      };
      this.setMapDataSource(null);
  }

  setMapDataSource = (value) => {
      const query = {
          page: 1,
          pageSize: 10,
      };
      if (value != null) {
          query.name = value;
      }
      request({
          method: 'POST',
          url: `${host}/map/query`,
          data: query,
      }).then((res) => {
          const data = res?.data?.data;
          const code = res?.data?.code;
          if (code === 200) {
              data.list.forEach((item) => {
                  const type = item.type === 1 ? '-室内' : '-室外';
                  item.label = item.name + type;
                  item.value = item.name;
              });
              this.setState({
                  mapDataSourece: data.list,
              });
          }
      });
  }


  handleMapSelectSearch = (value) => {
      this.setMapDataSource(value);
  }

  formChange = (value) => {
      this.setState({
          value,
      });
  };

  addRedVest = () => {
      this.state.value.redVestNumStr.push({});
      this.setState({ value: this.state.value });
  };

  removeRedVest = () => {
      if (this.state.value.redVestNumStr.length == 1) {
          return;
      }
      this.state.value.redVestNumStr.pop();
      this.setState({ value: this.state.value });
  }

  addBlueVest = () => {
      this.state.value.blueVestNumStr.push({});
      this.setState({ value: this.state.value });
  };

  removeBlueVest = () => {
      if (this.state.value.blueVestNumStr.length == 1) {
          return;
      }
      this.state.value.blueVestNumStr.pop();
      this.setState({ value: this.state.value });
  }

  addOrangeVest = () => {
      this.state.value.orangeVestNumStr.push({});
      this.setState({ value: this.state.value });
  };

  removeOrangeVest = () => {
      if (this.state.value.orangeVestNumStr.length == 1) {
          return;
      }
      this.state.value.orangeVestNumStr.pop();
      this.setState({ value: this.state.value });
  }

  addYellowVest = () => {
      this.state.value.yellowVestNumStr.push({});
      this.setState({ value: this.state.value });
  };

  removeYellowVest = () => {
      if (this.state.value.yellowVestNumStr.length == 1) {
          return;
      }
      this.state.value.yellowVestNumStr.pop();
      this.setState({ value: this.state.value });
  }


  submit = () => {
      let flag = true;

      const createBattleRequest = {};
      if (stringCheck(this.state.value.name) == null) {
          Message.error('演习名称必填');
          return;
      }
      if (this.state.value.mapEntity == null) {
          Message.error('请选择演习地图');
          return;
      }
      const numSet = new Set();

      this.state.value.redVestNumStr.forEach((item) => {
          if ((item.begin == null) || (item.end == null)) {
              Message.error('开始结束编号必填');
              return;
          }
          if (item.begin > item.end) {
              Message.error('结束编号需大于等于开始编号');
              return;
          }

          for (let i = item.begin; i <= item.end; i++) {
              if (numSet.has(i)) {
                  Message.error('编号不能重复');
                  flag = false;
                  break;
              }
              numSet.add(i);
          }
      });
      this.state.value.blueVestNumStr.forEach((item) => {
          if ((item.begin == null) || (item.end == null)) {
              Message.error('开始结束编号必填');
              return;
          }
          if (item.begin > item.end) {
              Message.error('结束编号需大于等于开始编号');
              return;
          }
          for (let i = item.begin; i <= item.end; i++) {
              if (numSet.has(i)) {
                  Message.error('编号不能重复');
                  flag = false;
                  break;
              }
              numSet.add(i);
          }
      });

      this.state.value.orangeVestNumStr.forEach((item) => {
          if ((item.begin == null) || (item.end == null)) {
              Message.error('人质开始结束编号必填');
              return;
          }
          if (item.begin > item.end) {
              Message.error('人质结束编号需大于等于开始编号');
              return;
          }
          for (let i = item.begin; i <= item.end; i++) {
              if (numSet.has(i)) {
                  Message.error('人质编号不能重复');
                  flag = false;
                  break;
              }
              numSet.add(i);
          }
      });

      this.state.value.yellowVestNumStr.forEach((item) => {
          if ((item.begin == null) || (item.end == null)) {
              Message.error('劫匪开始结束编号必填');
              return;
          }
          if (item.begin > item.end) {
              Message.error('劫匪结束编号需大于等于开始编号');
              return;
          }
          for (let i = item.begin; i <= item.end; i++) {
              if (numSet.has(i)) {
                  Message.error('劫匪编号不能重复');
                  flag = false;
                  break;
              }
              numSet.add(i);
          }
      });

      if (flag == false) {
          return;
      }
      createBattleRequest.name = this.state.value.name;
      createBattleRequest.mapId = this.state.value.mapEntity.id;
      createBattleRequest.mode = this.state.value.vestMode;
      createBattleRequest.teamData = [];
      const rList = this.state.value.redVestNumStr.map(i => ({
          ...i,
          team: 'red',
      }));
      const bList = this.state.value.blueVestNumStr.map(i => ({
          ...i,
          team: 'blue',
      }));
      const oList = this.state.value.orangeVestNumStr.map(i => ({
          ...i,
          team: 'orange',
      }));
      const yList = this.state.value.yellowVestNumStr.map(i => ({
          ...i,
          team: 'yellow',
      }));
      const list = [
          ...rList,
          ...bList,
          ...yList,
          ...oList,
      ];
      list.forEach((item) => {
          const obj = {};
          if (item.begin) {
              obj.startNum = item.begin;
          }
          if (item.team) {
              obj.team = item.team;
          }
          if (item.end) {
              obj.endNum = item.end;
          }
          if (item.weapon) {
              obj.primaryWeapon = item.weapon;
          }
          if (item.weapon2) {
              obj.secondaryWeapon = item.weapon2;
          }
          createBattleRequest.teamData.push(obj);
      });


      request({
          method: 'POST',
          url: `${host}/battle/set`,
          data: createBattleRequest,
      }).then((res) => {
          if (res.data.code === 200) {
              Message.success('演习方案新增成功');
          }
      });
  };

  render() {
      return (
          <div className={classnames('user-form', styles.wrapForm)}>
              <IceContainer>
                  <IceFormBinderWrapper
                      value={this.state.value}
                      onChange={this.formChange}
                  >
                      <div className={styles.formContent}>
                          <h2 className={styles.formTitle}>新增方案</h2>

                          <Row className={styles.formItem}>
                              <Col xxs="6" s="3" l="3" className={styles.formLabel}>
                  演习名称：
                              </Col>
                              <Col s="12" l="10">
                                  <IceFormBinder name="name">
                                      <Input
                                          size="large"
                                          placeholder=""
                                          className={styles.userName}
                                      />
                                  </IceFormBinder>
                              </Col>
                          </Row>

                          <Row className={styles.formItem}>
                              <Col xxs="6" s="3" l="3" className={styles.formLabel}>
                  演习地图：
                              </Col>
                              <Col s="12" l="10">
                                  <IceFormBinder name="mapEntity">
                                      <Select
                                          style={{ width: 300 }}
                                          dataSource={this.state.mapDataSourece}
                                          useDetailValue
                                          showSearch
                                          filterLocal={false}
                                          onSearch={this.handleMapSelectSearch}
                                          autoWidth={false}
                                      />
                                  </IceFormBinder>
                              </Col>
                          </Row>

                          {this.state.value.redVestNumStr.map((item, index) => (
                              <Row key={index} className={styles.formItem}>
                                  <Col xxs="6" s="3" l="3" className={styles.formLabel}>
                                      <span>{index == 0 ? '红方：' : ''}</span>
                                  </Col>
                                  <Col s="12" l="10">
                                      <IceFormBinder name={`redVestNumStr[${index}].begin`}>
                                          <NumberPicker min={1} style={{ width: '100px' }} placeholder="开始编号" />
                                      </IceFormBinder>&nbsp;
                                      <IceFormBinder name={`redVestNumStr[${index}].end`}>
                                          <NumberPicker min={1} style={{ width: '100px' }} placeholder="结束编号" />
                                      </IceFormBinder> &nbsp;
                                      <IceFormBinder name={`redVestNumStr[${index}].weapon`}>
                                          <Input placeholder="主武器" />
                                      </IceFormBinder>
                                      <IceFormBinder name={`redVestNumStr[${index}].weapon2`}>
                                          <Input placeholder="副武器" />
                                      </IceFormBinder>
                                  </Col>
                              </Row>
                          ))}

                          <Row className={styles.formItem}>
                              <Col xxs="6" s="3" l="3" className={styles.formLabel} />
                              <Col s="12" l="10">
                                  <Button type="secondary" onClick={this.addRedVest}>新 增</Button>&nbsp;
                                  <Button type="secondary" onClick={this.removeRedVest}>删 除</Button>
                              </Col>
                          </Row>

                          {this.state.value.blueVestNumStr.map((item, index) => (
                              <Row key={index} className={styles.formItem}>
                                  <Col xxs="6" s="3" l="3" className={styles.formLabel}>
                                      <span>{index == 0 ? '蓝方：' : ''}</span>
                                  </Col>
                                  <Col s="12" l="10">
                                      <IceFormBinder name={`blueVestNumStr[${index}].begin`}>
                                          <NumberPicker min={1} style={{ width: '100px' }} placeholder="开始编号" />
                                      </IceFormBinder>&nbsp;
                                      <IceFormBinder name={`blueVestNumStr[${index}].end`}>
                                          <NumberPicker min={1} style={{ width: '100px' }} placeholder="结束编号" />
                                      </IceFormBinder> &nbsp;
                                      <IceFormBinder name={`blueVestNumStr[${index}].weapon`}>
                                          <Input placeholder="主武器" />
                                      </IceFormBinder>
                                      <IceFormBinder name={`blueVestNumStr[${index}].weapon2`}>
                                          <Input placeholder="副武器" />
                                      </IceFormBinder>
                                  </Col>
                              </Row>
                          ))}

                          <Row className={styles.formItem}>
                              <Col xxs="6" s="3" l="3" className={styles.formLabel} />
                              <Col s="12" l="10">
                                  <Button type="secondary" onClick={this.addBlueVest}>新 增</Button>&nbsp;
                                  <Button type="secondary" onClick={this.removeBlueVest}>删 除</Button>
                              </Col>
                          </Row>

                          {this.state.value.orangeVestNumStr.map((item, index) => (
                              <Row key={index} className={styles.formItem}>
                                  <Col xxs="6" s="3" l="3" className={styles.formLabel}>
                                      <span>{index == 0 ? '人质：' : ''}</span>
                                  </Col>
                                  <Col s="12" l="10">
                                      <IceFormBinder name={`orangeVestNumStr[${index}].begin`}>
                                          <NumberPicker min={1} style={{ width: '100px' }} placeholder="开始编号" />
                                      </IceFormBinder>&nbsp;
                                      <IceFormBinder name={`orangeVestNumStr[${index}].end`}>
                                          <NumberPicker min={1} style={{ width: '100px' }} placeholder="结束编号" />
                                      </IceFormBinder> &nbsp;
                                  </Col>
                              </Row>
                          ))}

                          <Row className={styles.formItem}>
                              <Col xxs="6" s="3" l="3" className={styles.formLabel} />
                              <Col s="12" l="10">
                                  <Button type="secondary" onClick={this.addOrangeVest}>新 增</Button>&nbsp;
                                  <Button type="secondary" onClick={this.removeOrangeVest}>删 除</Button>
                              </Col>
                          </Row>


                          {this.state.value.yellowVestNumStr.map((item, index) => (
                              <Row key={index} className={styles.formItem}>
                                  <Col xxs="6" s="3" l="3" className={styles.formLabel}>
                                      <span>{index == 0 ? '劫匪：' : ''}</span>
                                  </Col>
                                  <Col s="12" l="10">
                                      <IceFormBinder name={`yellowVestNumStr[${index}].begin`}>
                                          <NumberPicker min={1} style={{ width: '100px' }} placeholder="开始编号" />
                                      </IceFormBinder>&nbsp;
                                      <IceFormBinder name={`yellowVestNumStr[${index}].end`}>
                                          <NumberPicker min={1} style={{ width: '100px' }} placeholder="结束编号" />
                                      </IceFormBinder> &nbsp;
                                      <IceFormBinder name={`yellowVestNumStr[${index}].weapon`}>
                                          <Input placeholder="主武器" />
                                      </IceFormBinder>
                                      <IceFormBinder name={`yellowVestNumStr[${index}].weapon2`}>
                                          <Input placeholder="副武器" />
                                      </IceFormBinder>
                                  </Col>
                              </Row>
                          ))}

                          <Row className={styles.formItem}>
                              <Col xxs="6" s="3" l="3" className={styles.formLabel} />
                              <Col s="12" l="10">
                                  <Button type="secondary" onClick={this.addYellowVest}>新 增</Button>&nbsp;
                                  <Button type="secondary" onClick={this.removeYellowVest}>删 除</Button>
                              </Col>
                          </Row>


                          <Row className={styles.formItem}>
                              <Col xxs="6" s="3" l="3" className={styles.formLabel}>
                  演习模式：
                              </Col>
                              <Col s="12" l="10">
                                  <IceFormBinder name="vestMode">
                                      <RadioGroup
                                          dataSource={[
                                              { label: '训练模式', value: 0 },
                                              { label: '演习模式', value: 1 },
                                          ]}
                                      />
                                  </IceFormBinder>
                              </Col>
                          </Row>
                      </div>
                  </IceFormBinderWrapper>

                  <Row>
                      <Col offset="3">
                          <Button
                              size="large"
                              type="primary"
                              onClick={this.submit}
                          >
                保 存
                          </Button>
                      </Col>
                  </Row>
              </IceContainer>
          </div>
      );
  }
}

